<template>
	<!-- <div class="flex justify-center items-center h-[100vh]"> -->
	<div class="space-y-4 flex flex-col items-center">
		<span class="flex justify-center font-bold text-3xl pb-6 items-center"> SleepLess </span>
		<label class="flex items-center gap-2 w-2/3">
			姓名
			<a-input v-model:value="registerInfo.realname" placeholder="realname" name="name" autocomplete="name" />
		</label>
		<label class="flex items-center gap-2 w-2/3">
			账号
			<a-input v-model:value="registerInfo.username" placeholder="username" name="username" autocomplete="username" />
		</label>
		<label class="flex items-center gap-2 w-2/3">
			密码
			<a-input-password
				v-model:value="registerInfo.password"
				placeholder="password"
				name="password"
				autocomplete="current-password"
			/>
		</label>
		<label class="flex items-center gap-2 w-2/3">
			再输一次
			<a-input-password
				v-model:value="againPassword"
				placeholder="password agin"
				name="password agin"
				autocomplete="current-password"
			/>
		</label>
		<div class="flex space-x-4 justify-center flex-col">
			<a-button class="text-lg text-center" @click="register">注册</a-button>
			<a>忘记密码</a>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { type RegisterType } from '@/types/user'
	import { push } from 'notivue'
	import { useUserStore } from '@/store/user'
	import { _register, _getUserInfo } from '@/api/user'

	const userStore = useUserStore()

	let registerInfo = reactive<RegisterType>({
		password: '',
		username: '',
		realname: '',
	})
	const againPassword = ref('')

	function init() {
		registerInfo.password = ''
		registerInfo.password = ''
		registerInfo.realname = ''
	}

	function register() {
		if (registerInfo.password == '' || registerInfo.username == '' || registerInfo.realname == '') {
			push.warning({
				title: '数据错误',
				message: '未填写完整信息',
			})
			return
		}
		if (againPassword.value != registerInfo.password) {
			push.warning({
				title: '数据错误',
				message: '两遍密码不一致',
			})
			return
		}
		_register(registerInfo).then((data) => {
			userStore.setToken(data.token)
			init()
			emit('registerCancel')
			_getUserInfo(null).then((data: any) => {
				userStore.login(data)
			})
		})
	}
	const emit = defineEmits(['registerCancel'])
</script>
